<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="live-app">

    <div class="row">
        <div class="col-md-6">
            <a v-show="show.list" class="btn btn-default" @click="getList">刷新</a>
            <a v-show="show.list" class="btn btn-info" @click="add">添加</a>
            <a v-show="show.edit" class="btn btn-danger" @click="show.edit=false;show.list=true;">关闭</a>
        </div>
        <div v-show="show.list" class="col-md-2">
            <div class="form-group">
                <label>选择日期：</label>
                <input class="form-control" type="date" v-model="page.date">
            </div>
        </div>
        <div v-show="show.list" class="col-md-4">
            <div class="form-group">
                <label>快捷选择：</label>
                <div>
                    <label><a class="btn btn-warning btn-xs" @click="turnDate(true)"><i class="fa fa-backward"></i></a></label>
                    <label><input type="radio" :value="preDates[0]" v-model="page.date">昨天</label>
                    <label><input type="radio" :value="preDates[1]" v-model="page.date">今天</label>
                    <label><input type="radio" :value="preDates[2]" v-model="page.date">明天</label>
                    <label><a class="btn btn-warning btn-xs" @click="turnDate(false)"><i class="fa fa-forward"></i></a></label>
                </div>
            </div>
        </div>
    </div>

    <div class="row" v-show="show.list">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>老师</th>
                    <th>标题</th>
                    <th>日期</th>
                    <th>播出时间段</th>
                    <th>频道</th>
                    <th>状态</th>
                    <th>封面</th>
                    <th>回看次数(实际/运营)</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.teacher_name}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.live_date}}</td>
                    <td>{{item | TimeRange}}</td>
                    <td>
                        <a class="btn btn-info btn-xs" title="点击查看" @click="showChannel(item)">{{getChannel(item).name}}</a>
                    </td>
                    <td>{{item.status | Status}}</td>
                    <td>
                        <a class="cover" :href="item.cover" target="_blank">
                            <img :src="item.cover + '?x-oss-process=image/resize,h_64'">
                        </a>
                    </td>
                    <td>{{item.replay_view}} / {{item.replay_num}}</td>
                    <td>
                        <a class="btn btn-info btn-xs" @click="edit(item)">编辑</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                        <a class="btn btn-info btn-xs" @click="uploadVideo(item)" v-if="item.status == 2">上传回看</a>

                        <!--<a class="btn btn-info btn-xs" @click="openDialog(item)" v-if="item.status>=2">修改回看地址</a>
                        <el-dialog title="回看地址" :visible.sync="dialogVisible" width="20%">
                            <el-input v-model="edit_item.video_url"></el-input>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="save_url">保 存</el-button>
                            </span>
                        </el-dialog>-->

                        <!--<a class="btn btn-info btn-xs" @click="positionAdd(item)">内容推荐</a>-->
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-8 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">

                <div class="form-group" >
                    <label>标题：</label>
                    <input class="form-control" v-model="edit_item.title" maxlength="32">
                </div>

                <div class="form-group" >
                    <label>老师：<a class="btn btn-info btn-xs" @click="getTeachers">刷新</a></label>
                    <select class="form-control" v-model="edit_item.teacher_id">
                        <option v-for="t in teachers" :value="t.id">{{t.realname}}</option>
                    </select>
                </div>

                <div class="form-group" >
                    <label>播出频道：<a class="btn btn-info btn-xs" @click="getChannels">刷新</a></label>
                    <select class="form-control" v-model="edit_item.live_channel_id">
                        <option v-for="c in channels" :value="c.id">{{c.name}} 【{{c.teacher_name || '-'}}】</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>绑定课程：<a class="btn btn-info btn-xs" @click="getCurriculumList">刷新</a></label>
                    <select class="form-control" v-model="edit_item.bind_curriculum_id">
                        <option :value="0">------</option>
                        <option v-for="c in curriculumList" :value="c.id">{{c.name}}</option>
                    </select>
                </div>

                <div class="form-group" >
                    <label>封面：</label>
                    <file-uploader v-model="edit_item.cover" filetype="image" oss="true" policyUrl="/alioss/get_policy" filesize="1M"></file-uploader>
                </div>

                <div class="form-group" >
                    <label>日期：</label>
                    <input class="form-control" type="date" v-model="edit_item.live_date">
                </div>

                <div class="form-group">
                    <label>播出时间：</label>
                    <select v-model="edit_item_select_time_val">
                        <option value="0">快速选择……</option>
                        <option v-for="(o,i) in selectTimeRange" :value="i">{{o.start}} - {{o.end}}</option>
                    </select>
                    <label>
                        手动输入： <input type="time" v-model="edit_item.start"> - <input type="time" v-model="edit_item.end">
                    </label>
                </div>

                <div class="form-group">
                    <label>介绍：</label>
                    <ck-editor v-model="edit_item.introduce" :tag="edit_tag"></ck-editor>
                </div>

                <div class="form-group">
                    <label>直播价格(￥)：</label>
                    <input type="number" step="0.01" min="0" class="form-control" v-model="edit_item.live_price">
                </div>

                <div class="form-group">
                    <label>会看价格(￥)：</label>
                    <input type="number" step="0.01" min="0" class="form-control" v-model="edit_item.playback_price">
                </div>

                <div class="form-group">
                    <label>回看次数：</label>
                    <input class="form-control" v-model="edit_item.replay_num">
                </div>

                <div v-if="edit_item.bind_curriculum_id<=0">
                    <div class="form-group">
                        <label>是否加密：</label>
                        <a @click="getPassword(edit_item.is_encrypt)"><input type="checkbox" v-model="edit_item.is_encrypt"></a>
                    </div>

                    <div class="form-group">
                        <label>视频密码为：</label>
                        <input class="form-control" v-model="edit_item.password" disabled="disabled">
                    </div>
                </div>


                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row" v-show="show.video">
        <div class="col-md-4 col-md-offset-2">
            <h3>上传视频</h3>
            <div class="form" role="form">

                <div class="form-group">
                    <label>节目：{{upload_video.title}}</label>
                </div>

                <div class="form-group">
                    <label>日期：{{upload_video.live_date}}</label>
                </div>

                <div class="form-group" >
                    <label>视频文件：</label>
                    <file-uploader v-model="upload_video.video_url" filetype="video" oss="true" policyUrl="/alioss/get_policy" filesize="500M" @duration="setDuration"></file-uploader>
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="upload">保存</a>
                    <a class="btn btn-warning" @click="show.video=false;show.list=true">取消</a>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modal-channel-detail">
        <div class="modal-dialog" role="document" style="width:100rem">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title">频道: {{channel_show.name}}</h3>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-1">推流地址</div>
                        <div class="col-md-11">
                            <div class="col-md-10"><input class="form-control" :value="channel_show.pushurl" readonly></div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-1">播放地址</div>
                        <div class="col-md-11">
                            <div class="col-md-10"><input class="form-control" :value="channel_show.pullurlhls" readonly></div>
                            <div class="col-md-10"><input class="form-control" :value="channel_show.pullurlrtmp" readonly></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!--内容推荐-->
    <div class="row" v-show="show.position">
        <div class="box-header">
            <h3>内容推荐</h3>
        </div>
        <div class="box-body">
            <position-add v-model="positionData" :item_type="3" item_url="http://www.zqcj.net.cn/" ref="positionModal"></position-add>
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-primary pull-right" @click="positionSave()">推荐</button>
            <button type="button" class="btn btn-default pull-left" @click="show.position=false;show.list=true">取消</button>
        </div>
    </div>
    <!--内容推荐 /-->
</section>
<!-- /.content -->

<script>
    var Statuses = {
        "0": "未开始",
        "1": "正在直播",
        "2": "已结束",
        "3": "可回看"
    };
    var SelectTimeRange = {
        1: {start: '09:30', end: '10:30'},
        2: {start: '10:30', end: '11:30'},
        3: {start: '13:00', end: '14:00'},
        4: {start: '14:00', end: '15:00'}
    };

    var today = formatDate(new Date());

    var live_app = new Vue({
        el: '#live-app',
        data: {
            list: [],
            edit_item: {},
            edit_tag: Math.random(),
            edit_content: '',
            edit_item_select_time_val: 0,
            upload_video: {},
            page: {
                last: 1,
                page: 1,
                rows: 10,
                date: today
            },
            teachers: [],
            channels: [],
            curriculumList: [],
            channel_show: {},
            dates: [],
            preDates: [],
            show: {
                list: true,
                edit: false,
                video: false,
                position:false
            },
            enable: {
                save: false
            },
            selectTimeRange: SelectTimeRange,
            positionData: {},
            dialogVisible:false
        },
        created: function () {

            var day = new Date();
            this.preDates[1] = formatDate(day);
            day.setDate(day.getDate() - 1);
            this.preDates[0] = formatDate(day);
            day.setDate(day.getDate() + 2);
            this.preDates[2] = formatDate(day);

            this.getTeachers();
            this.getChannels();
            this.getCurriculumList();
            this.getList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/lives/list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.data.data;
                        this.list.forEach(function (item, index) {
                            item.start = new Date(item.start_time).toTimeString().substr(0, 5);
                            item.end = new Date(item.end_time).toTimeString().substr(0, 5);
                        });
                        this.page.last = resp.data.last_page;
                    }.bind(this)
                });
            },
            getTeachers: function () {
                ajax({
                    uri: '/common/teacher_names',
                    success: function (resp) {
                        this.teachers = resp.data;
                    }.bind(this)
                });
            },
            getChannels: function () {
                ajax({
                    uri: '/common/channel_names',
                    success: function (resp) {
                        this.channels = resp.data;
                    }.bind(this)
                });
            },
            getCurriculumList: function () {
                ajax({
                    uri: '/common/curriculum_names',
                    success: function (resp) {
                        this.curriculumList = resp.data;
                    }.bind(this)
                })
            },
            getChannel: function (item) {
                var cid = item.live_channel_id;
                for (var i in this.channels) {
                    if (this.channels[i].id == cid) return this.channels[i];
                }
                return {};
            },
            showChannel: function (item) {
                this.channel_show = this.getChannel(item);
                $("#modal-channel-detail").modal('show');
            },
            add: function () {
                this.show.list = false;
                this.show.edit = true;
                this.setContent(null);
                this.edit_item = {live_date: this.page.date, live_price: 0.00, playback_price: 0.00, introduce:'', replay_num:0,is_encrypt:false,password:'',bind_curriculum_id:0};
                this.edit_tag = Math.random();
            },
            edit: function (item) {
                this.edit_item = item;
                this.show.list = false;
                this.show.edit = true;
                this.edit_tag = Math.random();
            },
            save: function () {

                var item = {};
                for (var p in this.edit_item) {
                    item[p] = this.edit_item[p];
                }
                if (!item.start || !item.end) {
                    showAlert('error','请选择时间段！');
                    return;
                }
                item.start_time = item.live_date+" "+item.start;
                item.end_time = item.live_date+" "+item.end;
                item.start = item.end = null;

                if (!item.cover || !item.teacher_id ||
                    !item.live_date || !item.introduce ||
                        !item.start_time || !item.end_time ||
                        !item.live_channel_id
                ) {
                    alert('请完善资料！');
                    return;
                }

                ajax({
                    uri: '/lives/save',
                    data: item,
                    success: function(resp){
                        this.show.list = true;
                        this.show.edit = false;
                        this.getList();
                    }.bind(this)
                });
            },
            del: function (item) {
                if (confirm("真的要删除吗？要考虑清除哦！( ′◔ ‸◔`)") === false) return;
                ajax({
                    uri: '/lives/del',
                    data: {id: item.id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            setTeacherId: function (teacherId) {
                this.edit_item.teacher_id = teacherId;
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            },
            turnDate: function (back) {
                var d = new Date(this.page.date);
                d.setDate(d.getDate() + (back ? -1 : 1) );
                this.page.date = formatDate(d);
            },
            setIntroduce: function (text) {
                this.edit_item.introduce = text;
            },
            uploadVideo: function (item) {
                this.upload_video = {
                    id: item.id,
                    video_url: item.video_url,
                    title: item.title,
                    live_date: item.live_date,
                    duration: item.duration
                };
                this.show.list = false;
                this.show.video = true;
            },
            upload: function () {
                ajax({
                    uri: '/lives/save_video',
                    data: this.upload_video,
                    success: function (resp) {
                        this.show.list = true;
                        this.show.video = false;
                        this.getList();
                    }.bind(this)
                })
            },
            setDuration: function (duration) {
                this.upload_video.duration = duration;
            },
            setContent: function (c) {
                this.edit_content = c;
            },

            /* 内容推荐 */
            positionAdd: function (item) {
                let self = this;
                this.positionData = {
                    itemId: item.id,
                    itemTitle: item.title,
                    itemImg: item.cover
                };

                this.show.list = false;
                self.show.position = true;
                setTimeout(function () {
                    self.$refs.positionModal.loadData(self.positionData);
                }, 50);
            },
            positionSave: function () {
                let self = this;
                self.$refs.positionModal.save(function () {
                    self.show.list = true;
                    self.show.position = false;
                });
            },
            getPassword:function (is_encrypt) {
                if(is_encrypt && !this.edit_item.password){
                    ajax({
                        uri: '/lives/getPassword',
                        data: {id:this.edit_item.id},
                        success: function(resp){
                            this.edit_item.password=resp.data;
                        }.bind(this)
                    });
                }
            },
            openDialog:function (item) {
                this.edit_item = item;
                this.dialogVisible=true;
            },
            save_url:function () {
                ajax({
                    uri: '/lives/save_video_url',
                    data: {id:this.edit_item.id,video_url:this.edit_item.video_url},
                    success: function(resp){
                        this.dialogVisible=false;
                        this.getList();
                    }.bind(this)
                });
            }
            /* 内容推荐 end */
        },
        filters: {
            TimeRange: function (item) {
                return item.start + " - " + item.end;
            },
            Status: function (s) {
                return Statuses[s];
            }
        },
        watch: {
            'page.page': function (nv, ov) {
                this.getList();
            },
            'page.date': function (nv, ov) {
                this.getList();
            },
            'edit_item_select_time_val': function (nv, ov) {
                if (nv < 1) return;
                var o = SelectTimeRange[nv];
                this.edit_item.start = o.start;
                this.edit_item.end = o.end;
            }
        }
    });
</script>